import { ElButton, ElImage, ElTag } from 'element-plus'
import { ShowEditDialog } from './components/Edit.vue'
import { EditDialogType } from '/@/components/QsEditDialog'

interface User extends defs.common.User {
  role: defs.common.Role
  dept: defs.common.Department
}

export const columns: Columns<
  User,
  {
    delete: (id: number) => Promise<void>
    'show-edit': ShowEditDialog
  }
> = [
  {
    title: '角色',
    key: 'role.name',
  },
  {
    title: '部门',
    key: 'dept.name',
  },
  {
    title: '用户名',
    key: 'username',
  },
  {
    title: '昵称',
    key: 'displayName',
  },
  {
    title: '头像',
    key: 'avatar',
    customRender: ({ row }) => {
      return <>{row.avatar && <ElImage class={'w-60px h-60px'} src={row.avatar} />}</>
    },
  },
  {
    title: '超级管理员',
    key: 'isSuper',
    customRender: ({ row }) => {
      return <>{row.isSuper ? <ElTag type='success'>是</ElTag> : <ElTag type='danger'>否</ElTag>}</>
    },
  },
  {
    title: '是否启用',
    key: 'isEnabled',
    customRender: ({ row }) => {
      return <>{row.isEnabled ? <ElTag type='success'>是</ElTag> : <ElTag type='danger'>否</ElTag>}</>
    },
  },
  {
    width: 200,
    fixed: 'right',
    title: '操作',
    key: 'action',
    customRender: ({ row }, emit) => {
      return (
        <>
          <ElButton
            link
            type='primary'
            onClick={() =>
              emit('show-edit', {
                type: EditDialogType.EDIT,
                data: row,
              })
            }
          >
            编辑
          </ElButton>
          {/* <ElButton type='danger' link onClick={() => emit('delete', row.id)}>
            删除
          </ElButton> */}
        </>
      )
    },
  },
]
